<template>
  <div>
    <Drawer title="商品属性" v-model="goodsCategoryAttrsDrawer" width="1020" @on-close="closeDrawer" :scrollable="true">
      <GoodsAttributeMainMultiple ref="goodsAttributeMainMultipleShow" @closeDrawer="closeDrawer" @showAddModal="showAddModal" @refresh="refresh"/>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="closeDrawer">取消</Button>
        <Button type="primary" @click="closeDrawer">关闭</Button>
      </div>
    </Drawer>
    <Modal v-model="modal.attrAddModal" title="新增" :mask-closable="true" width="1020">
      <GoodsAttributeMainMultiple ref="goodsAttributeMainMultipleAdd" optType="add" @closeAddModal="closeAddModal" @refresh="refresh"/>
       <div slot="footer">
            <Button type="text" size="large" @click="closeAddModal">取消</Button>
            <Button type="primary" size="large" @click="updateAttrs">确认选择</Button>
        </div>
    </Modal>
  </div>
</template>

<script>
import GoodsAttributeMainMultiple from '@/view/goods-attribute/GoodsAttributeMainMultiple.vue'
import GoodsCategoryMainSingle from '../goods-category/GoodsCategoryMainSingle.vue'
import { getAttrsByCategory } from '@/api/goods_attribute'
import * as utils from '@/api/utils-v2.js'
import * as ResponseStatus from '@/api/response-status'
export default {
  name: 'GoodsCategoryAttrsDrawer',
  components: {
    GoodsAttributeMainMultiple,
    GoodsCategoryMainSingle
  },
  data() {
    return {
      goodsCategoryAttrsDrawer: false,
      modal: {
        choice: false,
        attrAddModal: false
      },
      urls: {
        listCategoryAttrUrl: '/goods-category-attr/admin/list-by-category/',
      },
      goodsCategoryId: null,
    }
  },
  computed: {},
  mounted() {},
  methods: {
    initData(categoryId) {
      this.goodsCategoryId = categoryId
      let params = {
        goodsCategoryId: categoryId
      }
      let goodsAttributeMainMultipleShow = this.$refs.goodsAttributeMainMultipleShow
      goodsAttributeMainMultipleShow.extraData.categoryId = categoryId
      getAttrsByCategory(params).then(res => {
          const data = res.data
          if (data.code !== ResponseStatus.OK) {
            this.$Message.error(data.message)
            return
          }
          let goodsAttributeMainMultipleAdd = this.$refs.goodsAttributeMainMultipleAdd
          goodsAttributeMainMultipleAdd.selectedData = data.data.rows
          goodsAttributeMainMultipleAdd.selectedDataIdProp = 'goodsAttributeId'
          goodsAttributeMainMultipleAdd.extraData.categoryId = categoryId
          let goodsAttributeMainMultipleShow = this.$refs.goodsAttributeMainMultipleShow
          this.goodsCategoryAttrsDrawer = true
          let goodsAttributeIds = [0]
          data.data.rows.forEach(row => {
            goodsAttributeIds.push(row.goodsAttributeId)
          })
          goodsAttributeMainMultipleShow.$refs.searchModal.searchForm.ids = goodsAttributeIds
          goodsAttributeMainMultipleShow.searchTable(false, true)
        }).catch(err => {
          this.$Message.error(err)
        })
        goodsAttributeMainMultipleShow.getAttrGroup()
    },
    
    showAddModal() {
      this.modal.attrAddModal = true
      let goodsAttributeMainMultipleAdd = this.$refs.goodsAttributeMainMultipleAdd
      goodsAttributeMainMultipleAdd.searchTable(false, true)
    },
    closeDrawer() {
      this.goodsCategoryAttrsDrawer = false
    },
    closeAddModal() {
      this.modal.attrAddModal = false
    },
    updateAttrs() {
      this.$refs.goodsAttributeMainMultipleAdd.confirmSelection()
    },
    refresh(userId) {
      this.initData(userId)
    },
    showModal(modal) {
      utils.showModal(this, modal)
    },
  }
}
</script>

<style>
.demo-drawer-footer {
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>
